<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html</title>
	<style>
		body{
			width:400px;
		}
		#a{
			width:200px;
			height: 200px;
			background:red;
			float:left;
		}
		#b{
			width:200px;
			height: 200px;
			background:yellow;
			float:left;
		}
		#c{
			width:200px;
			height: 200px;
			background:green;
			float:left;
		}
		#d{
			width:200px;
			height: 200px;
			background:blue;
			float:left;
		}
		.e{
			width:0px;
			border:100px;
			border-style: solid solid solid solid;
			border-color:transparent transparent yellow transparent;
			
		}
		.f{
			border-width:50px;
			border-height:0px;
		}
	</style>
</head>

<body>
	<div id="a">a</div>
	<div id="b">b</div>
	<div id="c">c</div>
	<div id="d">d</div>


<hr>
<div class="e">a</div>
<div class=" e f ">a</div>






</body>
</html>